<template>
<div class="add-Man">
	<a-modal
      title="添加外部联系人"
      :visible="visible"
      @cancel="handleCancel"
      width="750px"
      :footer="null">
          <a-form  :form="form" @submit="handleSubmit">
          	<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="成员列表中选择">
				<a-select  v-decorator="[ 'type']" placeholder="请选择消息接收人" @change="getUserinfo">
					<a-select-option :value="item.userId" v-for="(item,index) in userList" :key='index'>{{item.username}}</a-select-option>
				</a-select>
			</a-form-item>
            <a-row>
                 <a-col :span='12' class='ela-220'>
                    <a-form-item label="人员姓名" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                      <a-input v-decorator="['realName',{rules: [{ required: true, message: '人员姓名不能为空' }]}]" placeholder='请填写联系人姓名'/>
                   </a-form-item>
                 </a-col>
          
                <a-col :span='12' class='ela-220'>
                    <a-form-item label="联系方式：" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                      <a-input v-decorator="['linkMobile',{rules: [{ required: true, message: '联系方式格式不正确' }]}]" placeholder='请填写联系方式' />
                   </a-form-item> 
                </a-col>
            </a-row>
            <a-row>
<!--                          <a-col :span='12' class='ela-220'>
                    <a-form-item label="名称：" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                      <a-input v-decorator="['note',{rules: [{ required: true, message: 'Please input your note!' }]}]" placeholder='外部联系人(默认)'/>
                   </a-form-item>
                 </a-col> -->
                <a-col :span='12' class='ela-220'>
                    <a-form-item label="邮箱:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                      <a-input v-decorator="['linkMail',{rules: [{ required: true, message: '邮箱格式不正确' }]}]" placeholder='请填写邮箱'/>
                   </a-form-item>
                </a-col>
            </a-row>
            <a-row class='ant-lable-button'>
              <a-button class='ant-btn-green' html-type="submit">立即添加</a-button>
              <a-button class='ant-btn-grey' @click="handleCancel">取消</a-button>
            </a-row>
         </a-form>
    </a-modal>
</div>
</template>
<script>
	export default {
	  data() {
	    return {
	    	userList:[],
	        visible: false,
	        form: this.$form.createForm(this),
	        loading: false
	    }
	  },
	  created() {

	  },
	  methods: {
	  	getUserinfo(value){
	  		console.log(value)
	  		for(var i in this.userList){
	  			if(this.userList[i].userId == value){
	  				this.form.setFieldsValue({
						realName:this.userList[i].username,
						linkMobile:this.userList[i].mobile,
						linkMail:this.userList[i].email,
					});
	  			}
	  		}
	  	},
      // 展示模态框
	    showModal() {
	      	this.visible = true;
			this.getMembers()
	    },
      // 取消按钮
      handleCancel(e) {
      	this.$emit('close');
        this.visible = false
        this.form.resetFields();
      },
      // 获取成员管理
	  getMembers() {
		this.$get('/members',{
			pageSize: 100,
			pageNum: 1,
		}).then((r) => {
			this.userList = r.data.data.rows
			console.log('r.data.data::',r.data.data.rows)
        }).catch((e) => {})
	  },
      // 消息接收人添加
      handleSubmit(e) {
        if(this.loading) return;
        e.preventDefault();
        this.form.validateFieldsAndScroll((err, values) => {
          if(!err) {
            this.loading = true;
            this.$post('/info/addressBook', values, true).then((r) => {
                this.$message.success(r.data.message);
                this.handleCancel();
              	this.loading = false;
            }).catch((e) => {
              this.loading = false;
            })
          }
        });
      },
	  }
}
</script>
<style lang="less">

</style>